window.addEventListener('load',function() {
    var focus = document.querySelector('.focus');
    var ar1 = document.querySelector('.arrow1');
    var ar2 = document.querySelector('.arrow2');
    var focusWidth = focus.offsetWidth;
    // 鼠标经过显隐arrwo
    focus.addEventListener('mouseenter', function () {
        ar1.style.display = 'block';
        ar2.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave', function () {
        ar1.style.display = 'none';
        ar2.style.display = 'none';
        timer = setInterval(function() {
        // 手动调用点击事件
        ar2.click();
        },2000);
    });
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {

        var li = document.createElement('li'); //创建小圆点
        li.setAttribute('index', i);  //赋值 index
        ol.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
                this.className = 'current';
            }

            var index = this.getAttribute('index');
            num = index
            circle = index
            animate(ul, -index * focusWidth);
        })

    }
  
    var first = ul.children[0].cloneNode(true);  //生成完li后克隆一个第一张   
    // var last = ul.children[3].cloneNode(true);  //生成完li后克隆一个第一张   
    ul.appendChild(first);
    // ul.insertBefore(last,ul.children[0]);
    console.log(ul.children.length);
    ol.children[0].className = 'current';
    var num = 0;
    var circle = 0;
    var flag = true;
    ar2.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
             ul.style.left = 0;
             num = 0;
         }
         num++;
         animate(ul, -num * focusWidth,function() {
             flag = true;  //打开节流阀
         });

         circle++;
         if (circle == ol.children.length) {  //如果circle等于 ol的li 长度说明 走到了克隆的图片 让其复原
             circle = 0;
         }
         circleChange();
        }
     });
     ar1.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';               
        }
        num--;
        animate(ul, -num * focusWidth,function() {
            flag = true;
        });
        

        circle--;
        if (circle == -1) {  //如果circle等于 ol的li 长度说明 走到了克隆的图片 让其复原
            circle = ol.children.length - 1;
        }
        circleChange();
        }
    });


    function circleChange() {
         // 先清除其他小圆圈的current类名
         for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';

        }
        ol.children[circle].className = 'current'; 
    }
    var timer = setInterval(function() {
        // 手动调用点击事件
        ar2.click();
    },2000)
})